<template>
    <div class="recommend">
      <h3 class="recommend-title">热门推荐</h3>
      <div class="recommend-list">
        <div class="recommend-item" v-for="item of recommendList" :key="item.id">
          <div class="item-img">
            <img :src="item.imgUrl">
          </div>
          <div class="item-content">
            <h5>{{item.title}}</h5>
            <p>{{item.desc}}</p>
            <i>查看详情</i>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "HomeRecommend",
      data (){
          return{
          }
      },
      props:{
          recommendList:Array
      }
    }
</script>

<style scoped lang="stylus">
  @import "~styles/stylus/mixins.styl"
    .recommend
      .recommend-title
        $container-title()
      .recommend-list
        padding :0rem 0.3rem
        .recommend-item
          padding :0.4rem 0rem .1rem 0rem
          border-bottom :1px solid $titleBgColor
          width :100%
          .item-img
            float :left
            margin-right :.2rem
          .item-img img
            width :1.8rem
            height: 1.25rem;
          .item-content
            h5
              font-size : 0.34rem
              $overflow()
              font-weight: 600
            p
              min-width :0rem
              margin :.15rem 0
              $overflow()
              color :$contentFontColor
            i
              display :inline-block
              padding :.05rem .1rem
              background-color:#FC8800
              color #ffffff
              border-radius :.2rem

</style>
